{% extends 'layout.html' %}
{% load static %}
{% block content %}

    <div class="container">
         <h1>通过channels进行发布任务的实时展示</h1>
        <input type="button" class="btn btn-primary" value="初始化图表" onclick="createDiagram()">
        <input type="button" class="btn btn-danger" value="代码发布" onclick="doDeploy()">
         <!--项目相关信息表格 start-->
         <table class="table table-bordered">
            <tr>
                <td>项目名称：{{ project_obj.title }}</td>
                <td>项目环境：{{ project_obj.get_env_display }}</td>
            </tr>
            <tr>
                <td>项目版本：{{ task_obj.tag }}</td>
                <td>项目状态：{{ task_obj.get_status_display }}</td>
            </tr>
            <tr>
                <td colspan="2">项目的仓库地址：{{ project_obj.repo }}</td>
            </tr>
            <tr>
                <td colspan="2">项目的线上路径：{{ project_obj.path }}</td>
            </tr>
{#            <tr>#}
{#                <td colspan="2">项目发布的版本：{{ task_obj.tag }}</td>#}
{#            </tr>#}
            <tr>
                <td colspan="2">
                    <div>关联的服务器:</div>
                    <ul>
                        {% for foo in project_obj.server.all %}
                            <li>{{ foo }}</li>
                        {% endfor %}

                    </ul>
                </td>
            </tr>
        </table>
         <!--项目相关信息表格 end-->
        <!--项目发布的实时展示 start-->
        <div id="content" style="height: 430px;background-color: #DAE4E4;">

        </div>
        <!--项目发布的实时展示 end-->
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/go.js' %}"></script>
    <script>

        //实例化全局变量
        var diagram;
        var ws;
        //页面框架加载完成的时候自动执行
        $(function () {
           initWebSocket();
           initDiagram();
        });

        //初始化图表的方法
        function initDiagram() {
            var $ = go.GraphObject.make;
            diagram = $(go.Diagram, "content", {
                layout: $(go.TreeLayout, {
                    angle: 0,
                    nodeSpacing: 20,
                    layerSpacing: 70
                })
            });

            diagram.nodeTemplate = $(go.Node, "Auto",
                $(go.Shape, {
                    figure: "RoundedRectangle",
                    fill: 'lightgray',
                    stroke: 'lightgray'
                }, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
                $(go.TextBlock, {margin: 8}, new go.Binding("text", "text"))
            );

            diagram.linkTemplate = $(go.Link,
                {routing: go.Link.Orthogonal},
                $(go.Shape, {stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
                $(go.Shape, {toArrow: "OpenTriangle", stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
                $(go.TextBlock, {font: '8pt serif', segmentOffset: new go.Point(0, -10)}, new go.Binding("text", "link_text"))
            );

            {#var nodeDataArray = [#}
            {#    {key: "start", text: '开始', figure: 'Ellipse', color: "lightgreen"},#}
            {#    {key: "download", parent: 'start', text: '下载代码', color: "lightgreen", link_text: '执行中...'},#}
            {#    {key: "compile", parent: 'download', text: '本地编译', color: "lightgreen"},#}
            {#    {key: "zip", parent: 'compile', text: '打包', color: "red", link_color: 'red'},#}
            {#    {key: "c1", text: '服务器1', parent: "zip"},#}
            {#    {key: "c11", text: '服务重启', parent: "c1"},#}
            {#    {key: "c2", text: '服务器2', parent: "zip"},#}
            {#    {key: "c21", text: '服务重启', parent: "c2"},#}
            {#    {key: "c3", text: '服务器3', parent: "zip"},#}
            {#    {key: "c31", text: '服务重启', parent: "c3"}#}
            {#];#}
            {#diagram.model = new go.TreeModel(nodeDataArray);#}

            /*
            diagram.model.addNodeData({key: "c4", text: '服务器3', parent: "c3", color: "lightgreen"})
            var c1 = diagram.model.findNodeDataForKey("c1");
            diagram.model.setDataProperty(c1, "color", "red");
            */
        }

        //初始化websocket
        function initWebSocket() {
            //创建websocket对象
            ws = new WebSocket('ws://127.0.0.1:8000/publish/{{ task_obj.pk }}/');
            //后台发送消息时 ws 会触发onmessage
            ws.onmessage=(function (event) {
                {#console.log(event.data);#}
                let result=JSON.parse(event.data);
                //初始化话操作
                if(result.code=='init'){
                    diagram.model = new go.TreeModel(result.data);
                }else if(result.code=='update'){//更新操作
                    //更新节点颜色 node_id:1  color:green
                    let node = diagram.model.findNodeDataForKey(result.node_id);
                    diagram.model.setDataProperty(node, "color", result.color);
                }

            })
        }

        //初始化话图表
        function createDiagram() {
            ws.send('init');
        }

        //真正部署
        function doDeploy() {
            ws.send('deploy');
        }
    </script>
{% endblock %}